<template>
  <div class="whith">
    <!-- 员工，公告审批 -->
    <div class="staff">
      <div class="to">
        <div class="tu">
          <div
            class="header1"
            v-for="(item, index) in headerData"
            :key="item"
            :index="index"
          >
            <div class="name">{{ item.name }}</div>
            <div class="header2">{{ item.number }}</div>
          </div>
        </div>
      </div>
      <!-- 快捷申请 -->
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <h3>快捷申请</h3>
            <a href="#" class="tab-a">更多</a>
          </div>
        </div>
        <div class="white">
          <div class="layui-card-body">
            <div class="ll">
              <el-button
                type="text"
                @click="dialog = true"
                class="btuu"
                v-for="(items, indexs) in Quick"
                :key="items"
                :index="indexs"
              >
                <i :class="items.icon" id="icon"></i>
                <div class="size">{{ items.name }}</div></el-button
              >
            </div>

            <div class="ll">
              <el-button
                type="text"
                @click="dialog = true"
                class="btuu"
                v-for="(items, indexs) in Quicks"
                :key="items"
                :index="indexs"
              >
                <i :class="items.icon" id="icon"></i>
                <div class="size">{{ items.name }}</div></el-button
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 代办事项 -->
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <h3>代办事项</h3>
          </div>
        </div>
        <div>
          <div
            class="layui-col-xs4"
            v-for="(item, index) in backlog"
            :key="item"
            :index="index"
          >
            <div class="layui-matter-item">
              {{ item.nameL }}
              <div class="pt">{{ item.nember }}</div>
            </div>
            <div></div>
          </div>
          <div
            class="layui-col-xs4"
            v-for="(item, index) in backlogs"
            :key="item"
            :index="index"
          >
            <div class="layui-matter-item">
              {{ item.nameL }}
              <div class="pt">{{ item.nember }}</div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
      <div class="ff">
        <!-- 企业公告 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane class="weight" label="企业公告" name="first">
            <div class="layui-table-cell">
              <el-table :data="tableData" border style="width: 100%" :cell-style="abc">
                <el-table-column
                  prop="announcement"
                  label="公告分类"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="name" label="公告标题">
                </el-table-column>
                <el-table-column prop="date" label="发布时间" width="180">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!-- 知识列表 -->
          <el-tab-pane class="weight" label="知识列表" name="second"
            >
              <div class="layui-table-cell">
              <el-table :data="tableData" border style="width: 100%" :cell-style="abc">
                <el-table-column
                  prop="classifg"
                  label="知识分类"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="classifgName" label="公告标题" style="">
                </el-table-column>
                <el-table-column prop="classifgdate" label="发布时间" width="180">
                </el-table-column>
              </el-table>
            </div>
            </el-tab-pane
          >
        </el-tabs>
      </div>
        <!-- 项目列表 -->
       <div class="ff">
        <div class="gg">项目列表 </div> 
        <el-table :data="headData" border style="width: 100%" :cell-style="project">
                <el-table-column
                  prop="name"
                  label="项目编号"
                width="90"
                header-align="center"
                >
                </el-table-column>
                <el-table-column prop="tap" label="状态"    width="80" header-align="center">
                  <span class="center">未完成</span>
                </el-table-column>
                   <el-table-column prop="project" label="项目名称"    width="350">
                </el-table-column>
                   <el-table-column prop="principal" label="负责人" width="80" header-align="center">
                </el-table-column>
                <el-table-column prop="date" label="项目周期" header-align="center">
                </el-table-column>
           </el-table>
       
      </div>
      <!-- 任务列表 -->
    <div class="ff">
        <div class="gg">任务列表 </div> 
        <el-table :data="headData" border style="width: 100%" :cell-style="project">
                <el-table-column
                  prop="name"
                  label="项目编号"
                width="90"
                header-align="center"
                >
                </el-table-column>
                <el-table-column prop="tap" label="状态"    width="80" header-align="center">
                  <span class="center">未完成</span>
                </el-table-column>
                   <el-table-column prop="project" label="项目名称"    width="350">
                </el-table-column>
                   <el-table-column prop="principal" label="负责人" width="80" header-align="center">
                </el-table-column>
                <el-table-column prop="date" label="项目周期" header-align="center">
                </el-table-column>
           </el-table>
       
      </div>
      <!-- 今日与昨日员工活跃度 -->
     <div>
    <div id="echarts"></div>
  </div>
  <!-- 近一年员工活跃度 -->
  <div>
      <div id="echarts1"></div>
  </div>
    </div>

    <div class="work">
      <el-button class="btn" icon="el-icon-document-checked" size="medium">
        <div>通讯录</div>
      </el-button>
      <el-button class="btn" icon="el-icon-date" size="medium">
        <div>日程安排</div>
      </el-button>
      <el-button class="btn" icon="el-icon-notebook-1" size="medium">
        <div>+工作汇报</div>
      </el-button>
      <el-button class="btn" icon="el-icon-document-copy" size="medium">
        <div>+工作记录</div>
      </el-button>
    </div>
    <div class="works">
      <div class="dd">
         山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
      </div>
      <div class="kk">
          <div id="workk"></div>
      </div>
    </div>
       <!-- 最活跃员工 -->
 
  </div>
</template>

<script>
import workTable from "@/components/workTable";
export default {
  name: "workBench",
  data() {
    return {
      activeName:'first',
      dialog: false,
      loading: false,
      headerData: [
        {
          name: "员工",
          number: "103",
        },
        {
          name: "公告",
          number: "13",
        },
        {
          name: "审批",
          number: "397",
        },
        {
          name: "报销",
          number: "49",
        },
        {
          name: "发票",
          number: "29",
        },
        {
          name: "客户",
          number: "33",
        },
        {
          name: "合同",
          number: "26",
        },
        {
          name: "项目",
          number: "26",
        },
        {
          name: "任务",
          number: "40",
        },
        {
          name: "文章",
          number: "16",
        },
      ],
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      Quick: [
        {
          icon: "el-icon-s-order",
          name: "请假申请",
        },
        {
          icon: "el-icon-s-promotion",
          name: "出差申请",
        },
        {
          icon: "el-icon-edit-outline",
          name: "外出申请",
        },
        {
          icon: "el-icon-s-custom",
          name: "加班申请",
        },
      ],
      Quicks: [
        {
          icon: "el-icon-s-shop",
          name: "采购申请",
        },
        {
          icon: "el-icon-s-cooperation",
          name: "物品维修",
        },
        {
          icon: "el-icon-s-check",
          name: "用章申请",
        },
        {
          icon: "el-icon-success",
          name: "用车申请",
        },
      ],
      backlog: [
        {
          nameL: "待审审批",
          nember: "0",
        },
        {
          nameL: "待审报销",
          nember: "0",
        },
        {
          nameL: "待审发票",
          nember: "0",
        },
      ],
      backlogs: [
        {
          nameL: "待回款",
          nember: "1",
        },
        {
          nameL: "待审合同",
          nember: "0",
        },
        {
          nameL: "待完成任务",
          nember: "6",
        },
      ],
      tableData: [
        {
          date: "2016-05-02:21:53",
          name: "十月一放假安排",
          announcement: "普通公告",
          classifg:"故障维修",
          classifgName:"新版生成器安装及使用说明",
          classifgdate:"2022-09-17 :17:22",
       
          
        },
        {
          date: "2016-05-04:19:51",
          name: "关于勾股OA的产品体验公告",
          announcement: "紧急公告",
          classifg:"故障维修",
          classifgName:"1123",
          classifgdate:"2022-09-17 :17:22",
          
        },
        {
          date: "2016-05-01:16:52",
          name: "关于张三丰连续旷工的处理",
          announcement: "普通公告",
          classifg:"办公软件",
          classifgName:"测试文章",
          classifgdate:"2022-09-17 :17:22",
        
        },
        {
          date: "2016-05-03:11:16",
          name: "全体员工开会通知",
          announcement: "普通公告",
          classifg:"行业技能",
          classifgName:"Mybatis与Hbernate的区别",
          classifgdate:"2022-09-17 :17:22"
        },
        {
          date: "2016-05-03:11:16",
          name: "请不要发只有几个英文或者数字的内容，尽量发一些看起来正常的文字",
          announcement: "普通公告",
          classifg:"故障维修",
          classifgName:"电脑黑屏故障怎么办？",
          classifgdate:"2022-09-17 :17:22"
        },
        {
          date: "2016-05-03:11:16",
          name: "开源是需要大家共同维护的，请不要发只有几个英文或者数字的内容",
          announcement: "普通公告",
          classifg:"机加工机器",
          classifgName:"电风扇无法工作，故障报错",
          classifgdate:"2022-09-17 :17:22"
        },
        {
          date: "2016-05-03:11:16",
          name: "护的，请不要发只有几个英文或者数字的内容，开放权限给大家体验编辑，已经很包容了，方便你我他，请大家体验的时候尽量写一些看起来正常的文字，最简单的去百科复制也行啊",
          announcement: "普通公告",
          classifg:"机加工机器",
          classifgName:"机器未润滑导致故障",
          classifgdate:"2022-09-17 :17:22"
        },
        {
          date: "2016-05-03:11:16",
          name: "开源不易，方便你我他，请尽量发一些看起来正常的文字",
          announcement: "普通公告",
          classifg:"行业技能",
          classifgName:"请大家体验的时候写一些看起来正常的文字，简单的去百科复制也行的",
          classifgdate:"2022-09-17 :17:22"
        },
      ],
      headData:[
        {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
         {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
         {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
         {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
         {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
         {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
         {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
         {
         tap:"进行中" ,
         name:"P1032",
         project:"售后",
        principal:"素还真",
        date:"2022-09-21 至 2022-10-31"
        },
      
        
      ],

      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "80px",
      timer: null,
    };
  },
  mounted(){
    let _self = this;
    _self. echartInit()
    _self.echartInitt()
    _self.echartInite()
  },
  methods:{
    echartInit() {
      let _self = this;
      let charDOM = document.getElementById("echarts");
      let myChart = _self.$echarts.init(charDOM);
      //_self.$echarts就是Vue原型里面注册的全局变量
      //init方法是原型初始化

    let option = {
  title: {
    text: '今日与昨日员工活跃度'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['今日', '昨日']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '0.5%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '今日',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },

    {
      name: '昨日',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
  

  ]
    };
      option && myChart.setOption(option); //这里的myChart就是初始化的myChart
    },
  echartInitt(){
    let _self = this;
      let charDOMs = document.getElementById("echarts1");
      let myCharts = _self.$echarts.init(charDOMs);
    const hours = [
    '9月', '1a', '10月', '3a', '11月', '5a', '12月',
    '7a', '1月', '9a', '2月', '11a',
    '3月', '1p', '4月', '3p', '5月', '5p',
    '6月', '7p', '7月', '9p', '8月', '11p'
];
// prettier-ignore
const days = [
    '周六', '周五', '周四',
    '周三', '周二', '周一', '周日'
];
// prettier-ignore
const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
    .map(function (item) {
    return [item[1], item[0], item[2]];
});
let options = {
  title: {
    text: '近一年员工活跃度'
  },
  legend: {
    data: ['Punch Card'],
    left: 'right'
  },
  tooltip: {
    position: 'top',
    formatter: function (params) {
      return (
        params.value[2] +
        ' commits in ' +
        hours[params.value[0]] +
        ' of ' +
        days[params.value[1]]
      );
    }
  },
  grid: {
    left: 2,
    bottom: 10,
    right: 10,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: hours,
    boundaryGap: false,
    splitLine: {
      show: true
    },
    axisLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    axisLine: {
      show: false
    }
  },
  series: [
    {
      name: '近一年员工活跃度',
      type: 'scatter',
      symbolSize: function (val) {
        return val[2] * 2;
      },
      data: data,
      animationDelay: function (idx) {
        return idx * 5;
      }
    }
  ]
};
options && myCharts.setOption(options);
  },
   echartInite(){
     let _self = this;
      let charDOMl = document.getElementById("workk");
      let myChartl = _self.$echarts.init(charDOMl);
    let  optionl = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: [
      '刘传心',
      '孙丙齐',
      '郑于洋',
      '马超',
      '吴笑天',
      '孙旭',
      '黄瑞',
      '张龙',
      '朱配文',
      '王文祥',
      "朱佩文"
    ]
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '20%'],
      label: {
        position: 'inner',
        fontSize: 10
      },
      labelLine: {
        show: false
      },
      data: [
        {  name: '刘传心' },
        {  name: '孙丙齐' },
        { name: 'Marketing', selected: true }
      ]
    },
    {
      name: '朱郑于洋配文',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      // label: {
      //   formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
      //   backgroundColor: '#F6F8FC',
      //   borderColor: '#8C8D8E',
      //   borderWidth: 1,
      //   borderRadius: 4,
      //   rich: {
      //     a: {
      //       color: '#6E7079',
      //       lineHeight: 22,
      //       align: 'center'
      //     },
      //     hr: {
      //       borderColor: '#8C8D8E',
      //       width: '100%',
      //       borderWidth: 1,
      //       height: 0
      //     },
      //     b: {
      //       color: '#4C5058',
      //       fontSize: 14,
      //       fontWeight: 'bold',
      //       lineHeight: 33
      //     },
      //     per: {
      //       color: '#fff',
      //       backgroundColor: '#4C5058',
      //       padding: [3, 4],
      //       borderRadius: 4
      //     }
      //   }
      // },
      data: [
        { value: 1048, name: '刘传心' },
        { value: 335, name: '孙丙齐' },
        { value: 310, name: '马超' },
        { value: 251, name: '吴笑天' },
        { value: 234, name: '孙旭' },
        { value: 147, name: '张龙' },
        { value: 135, name: '黄瑞' },
        { value: 102, name: '王文祥' },
          { value: 102, name: '郑于洋' },
          { value: 102, name: '朱佩文' },
          
      ]
    }
  ]
    };
    optionl && myChartl.setOption(optionl);
   },
    abc(column){
      if(column.columnIndex===1){
        return "color:#187fdd"
      }
    },
   project(column){
        if(column.columnIndex===2){
             return "color:#187fdd"
        }
      }
  },
  components: {
    workTable,
    
  },
};
</script>

<style>
.kk{
 margin-top:12px ;
 height: 200px;
 
}
#echarts {
  width: 100%;
  height: 400px;
  background-color: white;
  margin-top: 6px;
  
}
#echarts1{
   width: 100%;
  height: 400px;
  background-color: white;
  margin-top: 6px;
}
#workk{
   width: 100%;
  height: 400px;
  background-color: white;
 /* margin-top: 30px;
  padding-top: 30px; */
  padding: 12px;
}


.center{
  background-color:#47b347 ;
 color:#f3f3f3;
     height: 22px;
    line-height: 22px;
    padding: 0 5px;
    font-size: 12px;
}
.gg{
      font-size: 18px;
    font-weight: 600;
    margin-top: 15px;
    padding: 12px;


    
}
.whith .el-table td.el-table__cell div{
  white-space: nowrap;
  overflow: hidden;
}

div div .cell {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.layui-table-cell {
  padding: 6px;
}
.ff {
  background-color: white;
}
.item {
  font-size: 18px;
  font-weight: 600;
  padding-left: 15px;
}
.ll {
  /* width: 25px */
  padding-left: 30px;
}
.dd {

  height: 520px;
  background-color: white;
}
.white {
  background-color: white;
}
.pt {
  padding-top: 10px;
  color: #187fdd;
}
.layui-matter-item {
  color: #999;
  border-radius: 3px;
  display: block;
  padding: 12px;
  background-color: #f8f8f8;
}
.layui-col-xs4 {
  /* padding: 6px;s */
  width: 33.33333333%;
  padding: 12px;
  float: left;
  box-sizing: border-box;
  background-color: white;
}
.size {
  font-size: 16px;
  color: #646464;
}
#icon {
  display: inline-block;
  font-weight: 600;
  width: 100%;
  height: 53px;
  line-height: 58px;
  margin-bottom: 5px;
  text-align: center;
  border-radius: 3px;
  font-size: 28px;
  background-color: #f8f8f8;
  color: #969696;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.layui-card-body {
  position: relative;
  line-height: 24px;
  /* padding-left: 25px; */
}
.tab-a {
  line-height: initial;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -9px;
  color: #187fdd;
  cursor: pointer;
}
.layui-card-header {
  position: relative;
  padding: 0 12px;
  line-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
}
.layui-card {
  box-shadow: 0 1px 3px 0 rgb(5 32 96 / 10%);
  border-radius: 2px;
  background-color: #fff;
}
.layui-col-md6 {
  padding-top: 6px;
  padding-bottom: 6px;
  /* background-color: white; */
  padding-top: -5px;
  float: left;
  width: 50%;
  /* border-left: 2px solid #f5f6f7; */
}
.btuu {
  width: 21%;
}
@media screen and (min-width: 1192px) {
  .staff {
    width: calc(66.666666666% - 5px);
    float: left;
  }
  .work {
    width: calc(33.333333333% - 5px);
    margin-left: 10px;
    background-color: #fff;
    padding: 7px 6px;
    box-sizing: border-box;
    float: left;
  }
  .works {
    /* padding: 7px 6px; */
    box-sizing: border-box;
    margin-left: 10px;
    width: calc(33.333333333% - 5px);
    background-color:#f3f3f3;
    line-height: 100px;

    float: left;
    margin-top: 6px;
  }
}
@media screen and (max-width: 1191px) {
  .staff {
  }
  .work {
    background-color: #fff;
    padding: 7px 6px;
    margin-top: 20px;
  }
  .layui-col-md6 {
    width: 100%;
  }
  .works {
  }
  #workk{
    width: 100%;
  }
}

.work2 {
  display: flex;
  flex-wrap: nowrap;
}
.work1 {
  padding-top: 20px;
}
.name {
  font-size: 15px;
}
.work {
  display: flex;
  flex-wrap: nowrap;
}
.el-icon-document-checked {
  font-size: 40px;
}
.el-icon-date {
  font-size: 40px;
}
.el-icon-notebook-1 {
  font-size: 40px;
}
.el-icon-document-copy {
  font-size: 40px;
}
.btn {
  background-color: #f8f8f8;
  width: 25%;
  padding-right: 10px;
}
.header1 {
  flex: 1;
  padding: 16px 0;
  text-align: center;
  background-color: white;
}
.tu {
  display: flex;
  flex-wrap: no-wrap;
  width: 100%;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
.header2 {
  padding-top: 7px;
  padding-bottom: 6px;
  color: blue;
  font-size: 18px;
}
.header1 {
  border: 1px solid #f5f6f7;
  color: gray;
  font-size: 25px;
}
.whith {
  box-sizing: border-box;
}
body {
  background-color: #f3f3f3;
}
</style>
